<template>
  <page-body bgImg=' ' safeAreaLeft>
    <view class="reserve pages font-B ">
      <nav-bar title='我的预约' titleColor='#333'></nav-bar>
      <scroll-view style="height: calc(100vh - 50px);" scroll-y>
        <view style="height: 24px;"></view>
        <view class="reserve-item n-b jh-space-between jh-align-center" v-for="(i,index) in list" :key='index' @tap="showPopup(i)">
          <view class="font-17 c-000">{{i.staff_name}}</view>
          <view class="font-17" style="color: #9FA0A0;">{{i.end_time}}</view>
        </view>
        <view style="height: 24px;"></view>
      </scroll-view>
    </view>
    <backBtn></backBtn>
    <cover-view v-if="popup" class="mask" :style="{width: sysInfo.screenWidth + 'px',height: sysInfo.screenHeight + 'px'}" catchtouchmove='return' @click.stop="closePopup">
      <cover-view class="popup" :style="{width: sysInfo.screenWidth + 'px'}" @click.stop.prevent='stop'>
        <cover-view class="popup-item1 c-b-fff jh-row jh-flex-center" :style="{width: sysInfo.screenWidth + 'px'}">
          <cover-view class="jh-column jh-flex-center" @touchstart="touchstart('audioTap')" @touchend="touchend('audioTap')">
            <cover-image @touchstart="touchstart('audioTap')" @touchend="touchend('audioTap')" :src="ossDomain + '/icon-audio'+(audioTap ? '-a' : '')+'.png'" style="width: 36px;height: 36px;"></cover-image>
            <jh-text value="语音通话" size="11" :color="audioTap ? '#008399' : '#333'" type="Bold" @touchstart="touchstart('audioTap')" @touchend="touchend('audioTap')"></jh-text>
          </cover-view>
          <cover-view class="jh-column jh-flex-center" style="margin-left: 68px;" @touchstart="touchstart('videoTap')" @touchend="touchend('videoTap')">
            <cover-image @touchstart="touchstart('videoTap')" @touchend="touchend('videoTap')" :src="ossDomain + '/icon-video'+(videoTap ? '-a' : '')+'.png'" style="width: 36px;height: 36px;"></cover-image>
            <jh-text value="视频通话" size="11" :color="videoTap ? '#008399' : '#333'" type="Bold" @touchstart="touchstart('videoTap')" @touchend="touchend('videoTap')"></jh-text>
          </cover-view>
        </cover-view>
        <cover-view class="popup-item2 c-b-fff jh-flex-center" :style="{width: sysInfo.screenWidth + 'px', height: '48px'}" @click="popup = false">
          <jh-text value="取消" size="14" color="#333" type="Bold"></jh-text>
        </cover-view>
      </cover-view>
    </cover-view>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import backBtn from '@/components/back-btn/back'
  export default {
    components: {
      backBtn
    },
    computed: {
      ...mapState({
        sysInfo: state => state.global.systemInfo,
      }),
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        max_id: undefined,
        list: [],
        more: true,
        clickStatus: false,
        interval: true,
        timeout: null,
        popup: false,
        audioTap: false,
        videoTap: false
      }
    },
    onLoad() {
      this.getCallLog()
    },
    methods: {
      getCallLog () {
        let obj = {}
        if (this.max_id) {
          obj.max_id == this.max_id
        }
        this.$http.getCallLog(obj).then(res => {
          console.log(res.data);
          let {list, max_id} = res.data
          this.max_id = max_id
          this.list = this.list.concat(list)
          if (!list.length) {
            this.more = false
          }
        })
      },
      stop () {
        this.clickStatus = true
        return this.timeout = setTimeout(()=>{
          this.clickStatus = false
        },500)
      },
      touchstart (e) {
        this[e] = true
      },
      touchend (e) {
        setTimeout(()=>{
          this[e] = false
          if (e == 'audioTap') {
            this.callService(1)
          }
          if (e == 'videoTap') {
            this.callService(2)
          }
        },100)
      },
      showPopup () {
        return
        this.popup = true
      },
      closePopup () {
        if (this.clickStatus) return
        this.popup = false
      },
      callService(tapIndex) {
        if (this.interval) {
          this.interval = false
          let type = this.type - 0
          uni.$http.getStaff({
            type
          }).then(res => {
            let to = res.data.tencent_user_id
            uni.$emit("call", {
              type: 1,
              user: to,
              calltype: tapIndex, // 1.语音， 2.视频
            });
            setTimeout(() => {
              this.interval = true
            }, 500)
          }, err => {
            this.interval = true
          })
        }
      }
    },
    onReachBottom () {
      if (!this.more) return
      this.getCallLog()
    },
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding:0 30px;
    box-sizing: border-box;
  }
  .reserve{
    &-item{
      width: 100%;
      height: 50px;
      border: 1px solid #ddd;
      background-color: #fff;
      padding: 0 30px;
      box-sizing: border-box;
      &.n-b{
        border-bottom: 0;
      }
    }
  }
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: .3);
  }
  .popup{
    position: absolute;
    left: 0;
    bottom: 0;
    &-item1{
      height: 90px;
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
    }
    &-item2{
      border-top: 10px solid #eee;
    }
  }
</style>
